<template>
	<div>
    <zh-space>
				<zh-card title="">
					<zh-form ref="roleQueryFrom" :model="state.queryRoleParam">
						<zh-form-input prop="roleName" label="角色名称" placeholder="支持模糊查询" v-model="state.queryRoleParam.roleName"></zh-form-input>
						<zh-form-select
                prop="appId"
                :lazy="true"
                label="所属应用"
                v-model="state.queryRoleParam.appId"
                :fieldNames="{ label: 'appName', value: 'appId' }"
                funcCode="application0012"
                searchField="appName"
            ></zh-form-select>
            <template v-if="state.advanced">
              <zh-form-select
                v-model="state.queryRoleParam.searchType"
                label="查询类型"
                :options="state.searchTypeData"
                prop="searchType"
                placeholder="默认查询未添加的角色"
                @change="searchTypeChange"
              >
              </zh-form-select>
            </template>
						<zh-form-query :form-ref="roleQueryFrom" :table-ref="roleListTable" v-model="state.advanced"></zh-form-query>
					</zh-form>
				</zh-card>
				<zh-table ref="roleListTable" :rowConfig="{keyField:'roleId'}"  title="角色列表" :funcCode="state.funcCode" :columns="state.roleColumn">
					<template #status_default="{ row }"> <zh-badge :status="statusMap[row.status].status" :text="statusMap[row.status].text" /> </template
				></zh-table>
		</zh-space>
  </div>
</template>
<script lang="ts" setup name="addRoleModule">
const statusMap = {
	0: {
		status: 'error',
		text: '禁用',
	},
	1: {
		status: 'processing',
		text: '启用',
	},
};
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	id: {
		type: String,
	},
	type: {
		type: String,
	}
});
//------------------定义子组件---------------------------
const roleQueryFrom = ref();
const roleListTable = ref<any>({});
//------------------内部变量定义-------------------------
const state = reactive({
	advanced:false,
	queryRoleParam: {
    searchType: '1',
    status:'1',
		roleName: null,
		roleTypes: [],
	} as any,
  searchTypeData: [
		{ dictKey: '1', dictValue: '未关联角色' },
		{ dictKey: '2', dictValue: '已关联角色' },
		{ dictKey: '3', dictValue: '全部' },
	],
	dictData: {} as any,
	funcCode: '',
	roleColumn: [
    { type: 'checkbox', width: 50, fixed: 'left' },
		{ type: 'seq', width: 50, fixed: 'left', align: 'center', title: '序号' },
		{ field: 'roleId', title: '角色Id', visible: false, fixed: 'left', align: 'center', width: 150 },
		{ field: 'roleName', title: '角色名称', align: 'center', fixed: 'left', minWidth: 200 },
		{ field: 'parentId', title: '父角色Id', visible: false, align: 'center', minWidth: 200 },
		{ field: 'roleType', title: '角色类型', visible: false, align: 'center', width: 100 },
		{ field: 'roleTypeName', title: '角色类型', align: 'center', width: 150 },
		{
			field: 'status',
			title: '状态',
			align: 'center',
			width: 80,
			slots: {
				default: 'status_default',
			},
		},
    { field: 'appId', title: '应用id', visible: false, align: 'center', width: 100 },
		{ field: 'appName', title: '所属应用', align: 'center', width: 300 },
		{ field: 'remarks', title: '备注', align: 'center', showOverflow: true, minWidth: 250 },
	],
	roleVisible: false,
	dailogTitle: '添加到角色',
	dailogWidth: '80%',
	name: '',
});
//------------------定义调用方法-------------------------
const emit = defineEmits(['searchTypeBtn']);
function searchTypeChange(value) {
	onRoleQuery();
	emit('searchTypeBtn', value);
	setTimeout(() => {
		// state.userChecked = []
		roleListTable.value.clearCheckboxRow();
		roleListTable.value.clearCheckboxReserve();
	}, 50);
}
const onRoleQuery = () => {
  if(!props.id){
    return
  }
	roleListTable.value.query(state.queryRoleParam);
};
function getCheckedRoleIds() {
	const checkedList = roleListTable.value.getAllCheckboxRecords();
	if (checkedList) {
		if (checkedList.length <= 0) {
			$messageBox.warning('请先勾选需要授权的用角色', '提示');
			return false;
		}
	} else {
		$messageBox.warning('请先勾选需要授权的角色', '提示');
		return false;
	}
	let roleIds: Array<String> = [];
	checkedList.forEach((item: any) => {
		roleIds.push(item.roleId);
	});
	return roleIds;
}
//------------------初始化------------------------------
onMounted(()=>{
  if (props.type === 'router') {
    state.funcCode = 'router0024';
    state.name = '路由';
  }
  if (props.type === 'org') {
    state.funcCode = 'org0013';
    state.name = '组织';
  }
  if(props.type === 'menu'){
    state.funcCode = 'appmenu0013';
    state.name = '手机路由'
  }
  if (props.id) {
		state.queryRoleParam[props.type + 'Id'] = props.id;
	}
  nextTick(()=>{
    onRoleQuery();  
  })
  
})

// 初始化数据
const params = {
	dictFields: 'roleType',
};
$api.common.getBatchDict.post( params).then((res) => {
	state.dictData = res.result;
});
//--------------------监听变动数据-----------------------------
watch(
	() => props.id,
	(id) => {
		if (id) {
			state.queryRoleParam[props.type + 'Id'] = id;
		}
	}
);
//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({
	onRoleQuery,
	getCheckedRoleIds
});
</script>
<style lang="scss" scoped></style>
